<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title>.:: Orb ::.</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="Global.js"></script>        
        <script type="text/javascript" src="Hud.js"></script>
        <script type="text/javascript" src="Char.js"></script>
        <script type="text/javascript" src="Monster.js"></script>
        <script type="text/javascript" src="Terrain.js"></script>
        <script type="text/javascript" src="Collision.js"></script>
        <script type="text/javascript" src="Damage.js"></script>

    </head>
    <body style="text-align: center; background: black;">
        <div style="font-size: 24px; color: whitesmoke; position: relative; margin-top: 30px">Orb</div>
        <canvas id="canvas" style="position: relative; margin-top: 50px"></canvas>
    </body>
    <script type="text/javascript">
        var canvas, ctx, monsta;
        
        function Main() {
            Init();
            GameLoop();
        }
        
        function Init() {
            canvas = document.getElementById("canvas");
            canvas.setAttribute("width", WIDTH);
            canvas.setAttribute("height", HEIGHT);
            
            ctx = canvas.getContext("2d");
            
            CHAR.Init();
            
            monsta = new MONSTER(WIDTH - Math.ceil(Math.random()*500), 0);
            monsta.Init();
            HUD.Init();
            DAMAGE.Init();
        }
        
        function Update() {
            CHAR.Update();
            monsta.Update();
            HUD.Update(CHAR);
            
            if (getCollision(CHAR, monsta)) {
                if (CHAR.isAttacking) {
                    monsta=new MONSTER(WIDTH - Math.ceil(Math.random()*500), 0);
                    monsta.Init();
                } else {
                    CHAR.isAttacked=true;
                    CHAR.pos.X-=3;
                    CHAR.hp--;
                    DAMAGE.Add(CHAR, "1");
                }
                //console.log("PAF !!");
            } else {
                CHAR.isAttacked = false;
            }
            
            DAMAGE.Update();
        }
        
        function Render() {
            ctx.clearRect(0, 0, WIDTH, HEIGHT);

            TERRAIN.Draw(ctx);
            CHAR.Draw(ctx);
            monsta.Draw(ctx);
            HUD.Draw(ctx, CHAR);
            DAMAGE.Draw(ctx);
            
            ctx.strokeStyle= "white";
            this.ctx.strokeRect(CHAR.pos.X-(CHAR.size/2), HEIGHT-CHAR.pos.Y-CHAR.size-FLOOR, CHAR.size, CHAR.size);
            this.ctx.strokeRect(monsta.pos.X-monsta.size/2, HEIGHT-FLOOR-monsta.size-monsta.pos.Y, monsta.size, monsta.size);
            
        }
        
        function GameLoop() {
            requestAnimFrame(GameLoop);
            
            Update();
            Render();
        }
        
        window.onkeydown = function(e) {
            if (e.keyCode == KEYS.LEFT) {
                CHAR.move.left = true;
                
            } else if (e.keyCode == KEYS.RIGHT) {
                CHAR.move.right = true;
            };
            
            if (e.keyCode == KEYS.DOWN) {
                CHAR.atkRelease? CHAR.isAttacking = true : CHAR.isAttacking = false;
                CHAR.atkRelease = false;
            }
            
            if (e.keyCode == KEYS.UP) {
                CHAR.hp--;
            }
        }
        
        window.onkeyup = function(e) {
            if (e.keyCode == KEYS.LEFT) {
                CHAR.move.left = false;
                
            } else if (e.keyCode == KEYS.RIGHT) {
                CHAR.move.right = false;
            };
            
            if (e.keyCode == KEYS.DOWN) {
                CHAR.atkRelease = true;
            }
            
        }
        
        requestAnimFrame = (function() {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function( /* function */ callback, /* DOMElement */ element) {
                window.setTimeout(callback, 1000 / 60);
            };
        })();
        
        Main();
    </script>
</html>
